<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./flexible.js"></script>
    <style>
        html {
            /* 100vw设备的宽度 */
            /* 设备宽度的10.8分之1 为rem的基本单位
            
            设备1080px  1rem=100px
            设备750px   1rem = 750px / 10.8  等比例缩小
            设备640px   1rem = 640px / 10.8  等比例缩小
            */
            font-size: -webkit-calc(100vw / 10.8);


            /* 以设备宽度的10分之1为1rem的基本单位   1rem =  108px */
            /* font-size: -webkit-calc(100vw / 10); */

            /* 
            640
            750
            1080
            1440
            */

            /* 
            假如设计图宽: 1080px
            在设计图中  100vw = 1080px
                font-size: -webkit-calc(100vw / 10.8); 等价于 1080px / 10.8 => 100px
                1rem = 100px;  
                也可以理解为以: 设计图宽度的10.8分之1(9.2592vw) 作为rem的基本单位(100px)

                .box{
                    width: 6.31rem;
                    height: 6.31rem;
                }

            如何适配其他设备?
            在其他设备中(750): 
                100vw = 750px;

                font-size: -webkit-calc(100vw / 10.8);  等价于 750px / 10.8  => 69.44
                1rem = 69.44px; 
                在750设备中 本质上还是以 设备的10.8分之1为rem的基本单位

                .box{
                    width: 6.31rem;   6.31*69.44
                    height: 6.31rem;  6.31*69.44
                }

            在其他设备中(640): 
                100vw = 640px;

                font-size: -webkit-calc(100vw / 10.8);  等价于 640px / 10.8  => 59.259
                1rem = 59.259px; 
                在640设备中 本质上还是以 设备的10.8分之1为rem的基本单位

                .box{
                    width: 6.31rem;   6.31*59.259
                    height: 6.31rem;  6.31*59.259
                }




            
            
            
            */


        }
    </style>
</head>

<body>

</body>

</html>